<html>
    <head>
        <style>
            body {
                padding: 100px;
                margin: 0;
            }

            #box {
                width: 100px;
                height: 100px;
                background-color: #0077ff;
            }

            [data-layout-correct="false"] {
                background: #dd1144 !important;
                opacity: 1 !important;
            }
        </style>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/src/imports/optimized-appear.js"></script>
        <script type="module" src="/src/imports/script-assert.js"></script>

        <script type="module">
            const {
                motion,
                startOptimizedAppearAnimation,
                optimizedAppearDataAttribute,
                motionValue,
            } = window.Motion
            const { matchViewportBox } = window.Assert
            const root = document.getElementById("root")

            const duration = 1

            // This is the tree to be rendered "server" and client-side.
            const Component = React.createElement(motion.div, {
                id: "box",
                initial: { x: 0, opacity: 0.5 },
                animate: { x: 100, opacity: 1 },
                transition: { duration, ease: "linear" },
                /**
                 * On animation start, check the values we expect to see here
                 */
                onAnimationStart: () => {
                    setTimeout(() => {
                        // Start WAAPI animation
                        startOptimizedAppearAnimation(
                            document.getElementById("box"),
                            "transform",
                            ["translateX(0px)", "translateX(100px)"],
                            {
                                duration: duration * 1000,
                                ease: "linear",
                            }
                        )

                        // Start WAAPI animation
                        startOptimizedAppearAnimation(
                            document.getElementById("box"),
                            "opacity",
                            [0.5, 1],
                            {
                                duration: duration * 1000,
                                ease: "linear",
                            }
                        )

                        requestAnimationFrame(() => {
                            const { top, left } = document
                                .getElementById("box")
                                .getBoundingClientRect()

                            // Fuzzy to be permissive towards Cypress runner
                            if (left < 130) {
                                showError(box, `unexpected viewport box`)
                            }
                        })
                    }, 500)
                },
                [optimizedAppearDataAttribute]: "a",
                children: "Content",
            })
            // Emulate server rendering of element
            root.innerHTML = ReactDOMServer.renderToString(Component)

            ReactDOMClient.hydrateRoot(root, Component)
        </script>
    </body>
</html>
